<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

    </script>
</head>
<body>
    <div>
        <p>段落</p>
        普通文本
        <h1 id="d1" class="c1" style="color:red;"></h1>
        
        <h1>
             一级标题
            <span>span</span>

        </h1>
        
        普通文本
        <p>段落</p>
        
    </div>
    <script>
            var h1 = document.getElementsByTagName('h1')[0];
            var div = document.getElementsByTagName('div')[0];


            console.log(h1.parentNode);
            console.log(div.childNodes);
            console.log(div.children);
            //获取兄弟节点
            console.log(h1.nextSibling);
            console.log(h1.previousSibling);
            //获取下一个兄弟元素节点
            console.log(h1.nextElementSibling);
            console.log(h1.previousElementSibling);
            //获取属性节点用来打印
            console.log(h1.attributes);
    </script>
</body>
</html>